<template>
  <div class="my-cnenter">
    <div class="header">
      <van-uploader :after-read="afterRead">
        <van-button icon="plus" type="primary"></van-button>
      </van-uploader>
      <img class="img" :src="userinfo.uimg" />
      <p class="name">{{userinfo.uname}}</p>
    </div>
    <div class="container">
      <div class="group">
        <div class="orders">
          <div class="title">我的订单</div>
          <div class="list">
            <div class="order-item movie">
              <p>电影</p>
            </div>
            <div class="order-item store">
              <p>商城</p>
            </div>
          </div>
        </div>
      </div>
      <div class="group">
        <div class="item scale-1px">
          <div>在线观影</div>
        </div>
        <div class="item scale-1px">
          <div>优惠券</div>
        </div>
        <div class="item scale-1px">
          <div>折扣卡</div>
        </div>
      </div>
    </div>
    <van-button class="quit" type="danger" @click="quit">退出登录</van-button>
  </div>
</template>
<script>
// defaultImg||fileList
export default {
  data: () => ({
    fileList: '',
    userinfo: {}
  }),
  created () {
    this.userinfo = JSON.parse(localStorage.getItem('users') || '{}')[0]
    console.log(this.userinfo)
    this.$store.state.title = '我的'
    this.$store.dispatch('changeActive', this.$route.path)
  },
  methods: {
    async afterRead (file) {
      this.fileList = file.content
      let newObj = JSON.parse(localStorage.getItem('users') || '{}')[0]
      newObj.uimg = file.content
      localStorage.setItem('users', JSON.stringify([newObj]))
      this.userinfo = newObj
      // var formdata = new FormData()
      // formdata.set('uname', this.userinfo.uname)
      // formdata.set('uimg', this.fileList)
      // let url = 'http://127.0.0.1:8088/updateImg'
      // const {
      //   data: { status, msg }
      // } = await this.$http.post(url, { uname: 1234333434, uimg: this.fileList })
      // if (status !== -101) {
      //   this.$Toast(msg)
      // } else {
      //   this.$Toast('上传头像失败!')
      //   console.log(this.userinfo)
      // }
    },
    quit () {
      this.$Dialog
        .confirm({
          title: '提示',
          message: '确认退出登录吗？'
        })
        .then(() => {
          // on confirm
          localStorage.clear()
          // this.isLogin()
          if (localStorage.getItem('users')) {
            this.$store.state.isLogin = true
          } else {
            this.$store.state.isLogin = false
          }
          this.$router.push('/account/login')
        })
        .catch(() => {})
    }
  },
  beforeRouteLeave (to, from, next) {
    if (to.fullPath === '/account/login') {
      this.$router.push('/movie/hot')
    } else {
      next()
    }
  }
}
</script>
<style lang="less" scoped>
.my-cnenter {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  .header {
    background-color: #e54847;
    height: 150px;
    overflow: hidden;
    text-align: center;
    position: relative;
    .van-uploader {
      position: absolute;
      top: 80px;
      left: 196px;
      .van-button--primary {
        border-radius: 50%;
        background: rgb(110, 110, 108);
        border: 1px solid #ccc;
      }
      .van-button--normal {
        padding: 0px;
        height: 20px;
      }
      .van-icon::before {
        display: inline-block;
        top: -12px;
        position: relative;
      }
    }
    img {
      display: inline-block;
      margin-top: 30px;
      width: 60px;
      height: 60px;
      border-radius: 60px;
      border: 3px solid #fff;
    }
    .name {
      margin-top: 7px;
      font-size: 16px;
      line-height: 22.5px;
      color: #fff;
    }
  }
  .container {
    flex: 1;
    .group {
      margin-top: 10px;
      background: #fff;
    }
    .orders {
      padding: 0 15px;
      position: relative;
      overflow: hidden;
      text-align: center;
      .title {
        position: relative;
        margin: 13px 0 0;
        font-size: 15px;
        line-height: 21px;
        height: 21px;
        color: #333;
        z-index: 9;
        display: inline-block;
        width: 80px;
        background-color: #fff;
      }
      .list {
        overflow: hidden;
      }
      .order-item {
        float: left;
        height: 97px;
        background-repeat: no-repeat;
        background-position: top;
        background-size: 42px auto;
        margin-top: 18px;
        width: 50%;
        p {
          position: relative;
          top: 53px;
          text-align: center;
          font-size: 15px;
          line-height: 21px;
          height: 21px;
          margin: 0;
          color: #333;
        }
        &.movie {
          background-image: url('./images/movie.png');
        }
        &.store {
          background-image: url('./images/store.png');
        }
      }
    }
    .item {
      position: relative;
      height: 44px;
      line-height: 44px;
      font-size: 15px;
      margin-left: 15px;
      padding-right: 15px;
    }
    &::before {
      position: absolute;
      right: 15px;
      top: 18px;
      display: inline-block;
      content: '';
      width: 8px;
      height: 8px;
      border-left: 1px solid #ccc;
      border-top: 1px solid #ccc;
      transform: rotate(135deg);
    }
  }
  .quit {
    width: 80%;
    margin: 35px auto 0 auto;
    background: #e54847;
  }
}
</style>
